<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">活动日程管理</view>
		</cu-custom>
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-bold">{{activityInfo.title}}</text>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='modify'||modalName=='add'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改日程</view>
					<view class="action" @click="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="flex align-center margin-bottom">
						日程时间
						<picker class="margin-left" mode="time" :value="schedule.time" @change="timeChange">
							<view class="text-green">{{schedule.time}}</view>
						</picker>
					</view>
					<view class="flex align-center">
						日程内容
						<input v-model.lazy="schedule.content" :placeholder="schedule.content" @focus="clear"></input>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @click="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @click="modifySchedule()">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-timeline">
			<view class="cu-time">
				<view>{{activityInfo.time}}</view>
			</view>
			<view class="cu-item" :class="activityInfo.fold?'cuIcon-right':'cuIcon-unfold'">
				<view class="content" style="font-family: TsangerYuYangT W03;" @click="foldActivity">
					<view>{{activityInfo.title}}</view>
					<view>活动地点: {{activityInfo.place}}</view>
					<view>活动简介: {{activityInfo.content}}</view>
				</view>
			</view>
			<view class="cu-item" v-if="!activityInfo.fold" v-for="(shd, index) in activityInfo.schedule"
				:key="shd.time" :class="shd.present?'text-blue':''">
				<view class="content" @click="showModal('modify', index)">
					<view class="flex justify-between">
						<view class="cu-capsule radius">
							<view class="cu-tag bg-cyan">{{timeRange(shd.time)}}</view>
							<view class="cu-tag line-cyan">{{shd.time}}</view>
						</view>
						<view class="cuIcon-delete text-red" @click.stop="deleteSchedule(index)"></view>
					</view>
					<view class="margin-top">
						<view>{{shd.content}}</view>
					</view>
				</view>
			</view>
			<view v-if="!activityInfo.fold" class="cu-item cuIcon-add text-green" @click="showModal('add', 0)"></view>
		</view>
		<view class="flex padding justify-center">
			<button class="cu-btn lg bg-green" @click="submit">提交修改</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				url: this.url,
				activityInfo: {},
				// {
				// 	_id: '01',
				// 	title: '金秋艺术节',
				// 	content: '一年一度的金秋艺术节等你来参加, 名额有限, 速来报名!',
				// 	time: '09-18',
				// 	place: {
				// 		name: '梅园操场',
				// 		latitude: 30.535360857133234,
				// 		longitude: 114.36296577358243
				// 	},
				// 	fold: true,
				// 	schedule: [{
				// 		time: '10:00',
				// 		content: '参加活动人员签到',
				// 		present: true
				// 	}, {
				// 		time: '10:15',
				// 		content: '主持人宣布活动开始',
				// 		present: false
				// 	}, {
				// 		time: '10:30',
				// 		content: '活动颁奖典礼',
				// 		present: false
				// 	}, {
				// 		time: '11:00',
				// 		content: '活动结束, 有序退场',
				// 		present: false
				// 	}]
				// },
				modalName: null,
				modifyIndex: -1,
				schedule: ''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			foldActivity() {
				console.log('clicked')
				this.activityInfo.fold = !this.activityInfo.fold
				if (this.schedule == '') {
					uni.request({
						method: 'GET',
						url: this.url + '/schedule',
						data: {
							activityId: this.activityInfo.id
						},
						header: {
							Authorization: 'Bearer ' + this.userInfo.token
						},
						success: (res) => {
							console.log(res)
							if(res.statusCode == 200){
								this.activityInfo.schedule = res.data
							}
						}
					})
				}
			},
			timeRange(time) {
				return parseInt(time.slice(0, 2)) > 12 ? '下午' : '上午'
			},
			clear(e) {
				if (this.modalName == 'add') {
					this.schedule.content = ''
				}
			},
			deleteSchedule(index) {
				uni.showModal({
					title: '提示',
					placeholderText: '确定删除该日程吗',
					success: (res) => {
						if (res.confirm) {
							this.activityInfo.schedule.splice(index, 1)
						}
					}
				})
			},
			showModal(modal, index) {
				this.modalName = modal
				if (this.modalName == 'modify') {
					this.schedule = {
						...this.activityInfo.schedule[index]
					}
					this.modifyIndex = index
				} else if (this.modalName == 'add') {
					this.schedule = {
						time: '点击选择日程时间',
						content: '请输入日程内容',
					}
				}
			},
			hideModal() {
				this.modalName = null
			},
			timeChange(e) {
				this.schedule.time = e.detail.value
			},
			modifySchedule() {
				if (this.modalName == 'modify') {
					if (this.modifyIndex != -1) {
						this.activityInfo.schedule[this.modifyIndex] = this.schedule
					}
				} else if (this.modalName == 'add') {
					this.activityInfo.schedule.push(this.schedule)
				}
				this.modalName = null
			},
			addSchedule() {
				uni.showModal({
					title: '确定增加一个日程吗',
					placeholderText: '确定增加一个日程吗',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							this.activityInfo.schedule.push({
								time: '11:00',
								content: '活动结束, 有序退场',
								present: true
							})
						}
					}
				})
			},
			submit() {
				uni.request({
					method: 'PUT',
					url: this.url + '/schedule/' + this.activityInfo.id,
					data: this.activityInfo.schedule,
					header: {
						Authorization: 'Bearer ' + this.userInfo.token
					},
					success: (res) => {
						console.log(res)
						if(res.statusCode == 200){
							uni.showToast({
								title: '修改日程成功!',
								icon: 'none',
								duration: 1500
							})
							uni.navigateBack()
						}
					}
				})
			}
		},
		onLoad(option) {
			uni.request({
				method: 'GET',
				url: this.url + '/schedule/one/' + option.id,
				header: {
					Authorization: 'Bearer ' + this.userInfo.token
				},
				success: (res) => {
					console.log(res)
					if (res.statusCode == 200) {
						this.activityInfo = {
							...res.data,
							fold: true,
							schedule: []
						}
					}
				}
			})
		}
	}
</script>

<style>

</style>
